<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
				
			}
			.top_content{
				height: 200px;
				line-height: 200px;
				text-align: center;
				background-color: #eee;
			}
			.sticky{
				height: 50px;
				line-height: 50px;
				color: #fff;
				background: #333;
				text-align: center;
			}
			.main_content{
				height: 900px;
				background-color: #eee;
			}
			.ac{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				//JQ相关操作   思路：超过200px即定死吸顶灯
				//超过200px  固定>滚动    吸顶灯通过添加样式操作  定死在页面上
				//固定值:获取到达吸顶灯位置的偏移量
				//.offset()获取或设置元素相对于文档的偏移量
				//.top获取body偏移量
				var so=$(".sticky").offset().top;
				//$(Wixdow)   来监听窗口的事件：滚动   窗口视图大小
				//scroll()  监听页面滚动事件
				$(window).scroll(function(){
					//获取页面滚动值，动态值   scrollTop()获取滚动位置[动态值] 
					var st=$(window).scrollTop()
					//超过200px   动态值>固定值 200   条件满足：页面吸顶灯样式定死
					if(st>so){
						$(".sticky").addClass("ac");
					}else{
						$(".sticky").removeClass("ac");
					}
					
				});
			});
		</script>
	</head>
	<body>
		<div class="top_content">顶部内容效果</div>
		<div class="sticky">我是吸顶灯效果</div>
		<div class="main_content">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident cupiditate, expedita non fugiat et amet, maxime nihil quod esse sequi id, cum culpa perspiciatis adipisci totam blanditiis accusantium corrupti accusamus!
		Numquam voluptate aliquid harum corrupti, cumque delectus esse reiciendis, dolores tempora vero magnam. Aspernatur amet perspiciatis magni deleniti reiciendis quidem, natus laudantium accusantium hic? Ipsum perspiciatis quam saepe omnis quisquam.
		Fugit, aspernatur corrupti, similique perferendis, aut facere itaque sint nam ipsum repellat ipsa! Molestiae provident aut similique tenetur. Laudantium, rerum. Fuga incidunt voluptas quia, sed recusandae ratione doloremque quis quod!
		    
		</div>
		
		
		
	</body>
</html>